<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
    <title>聊天机器人-智子</title>
    <!-- 预加载loading图片 -->
    <link rel="prefetch" href="loading.gif" />
    <link rel="stylesheet" href="bootstrap.min.css" />
    <link rel="stylesheet" href="flat-ui.min.css" />
    <link rel="stylesheet" href="animate.min.css" />
    <style>
      .row {
        margin-top: 30px;
      }
      .res {
        height: calc(100vh - 300px);
        border: 2px solid #bdc3c7;
        border-radius: 5px;
        padding: 10px;
        margin: 20px auto;
        white-space: pre-wrap;
        word-break: break-all;
        overflow-y: auto;
        font-size: 15px;
      }
      .load {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      button:focus {
        outline: none;
        box-shadow: none !important;
      }
      .logo {
        display: block;
        margin: 20px auto;
        width: 100px;
      }
      .row {
        margin-top: 20px;
      }
      footer {
        background: transparent;
        text-align: center;
        font-size: 12px;
        color: #333;
        position: fixed;
        width: 100%;
        bottom: 30px;
        left: 0;
      }
      footer b {
        color: #1abc9c;
      }
      .loading {
        width: 120px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <!-- logo图标 -->
      <img src="robot.gif" alt="" class="logo animate__animated animate__bounceInDown" />
      <!-- 输入框条 -->
      <div class="input-group mb-3 animate__animated animate__fadeInUp">
        <input type="text" class="form-control" id="inputDom" placeholder="Input your question..." />
        <div class="input-group-append">
          <button class="btn btn-primary" type="button" onclick="search()">提问</button>
        </div>
      </div>
      <!-- 结果区域 -->
      <div class="res"></div>
      <!-- 说明 -->
      <footer>Powered by <b>gpt-3.5-turbo</b>, Developed by <b>JasonBai</b></footer>
    </div>
    <script>
      let inputDom = document.querySelector("#inputDom");
      let resDom = document.querySelector(".res");
      let isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);

      // 绑定双击复制事件
      resDom.addEventListener("dblclick", () => {
        if (resDom.textContent) copyText();
      });

      // 移动端复制
      resDom.addEventListener("click", () => {
        if (resDom.textContent && isMobile) copyText();
      });

      function copyText() {
        let el = document.createElement("input");
        el.value = resDom.textContent;
        document.body.appendChild(el);
        el.select();
        el.setSelectionRange(0, 99999); /* 为移动设备设置 */
        document.execCommand("copy");
        document.body.removeChild(el);
        alert("复制成功");
      }

      // 提问
      // 使用自己在亚马逊云服务器上封装的接口，因为国内已经把chatgptapi封了，只能通过海外服务器转发请求
      function search(e) {
        showLoading();
        if (inputDom.value === "") {
          alert("请输入您的问题");
          return false;
        }

        fetch("http://18.183.62.177:3000/api/askme", {
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            model: "gpt-3.5-turbo",
            inputData: [
              {
                role: "user",
                content: inputDom.value,
              },
            ],
          }),
        })
          .then((res) => res.json())
          .then((res) => {
            hideLoading();
            resDom.innerHTML = res.choices[0].message.content;
          });
      }

      function showLoading() {
        resDom.classList.add("load");
        resDom.innerHTML = '<img src="loading.gif" class="loading">';
      }
      function hideLoading() {
        resDom.classList.remove("load");
        resDom.innerHTML = "";
      }
    </script>
  </body>
</html>
